<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/shouye.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3007245_ypxjlundu5h.css">
    <link rel="stylesheet" href="../../node_modules/swiper/swiper-bundle.min.css">
</head>

<body>
    <!-- header -->
    <div class="header">
        <div class="container">
            <div class="left">
                <a href="">帮助中心</a>
                <a href="">收藏</a>
                <a href="">360官网</a>
                <a href="">360智慧生活</a>
            </div>
            <div class="rightt off active">
                <a href="../views/denglu.html">登录</a>
                <a href="../views/zhuce.html">注册</a>
                <a href="./zhuce.html" class="iconfont icon-shangchengdingdan"></a>
            </div>
            <div class="on">
                <span>xxxxxx</span>
                <a class="iconfont icon-shangchengdingdan" href="../views/gouwuche.html"></a>
            </div>
        </div>
    </div>

    <!-- look -->
    <div class="look">
        <div class="top">
            <p class="iconfont icon-duihuakuang4"></p>
            <p class="iconfont icon-weixin1"></p>
            <p class="iconfont icon-zixun"></p>
        </div>
        <div class="bott">
            <p class="iconfont icon-yingyong1"></p>
            <p class="iconfont icon-huidaodingbu last"></p>
        </div>
    </div>

    <!-- news -->
    <div class="news">
        <div class="container">
            <div class="left">
                <img src="https://p1.qhimg.com/t0102789b8d00c3dfce.png" alt="">
                <a href="https://mall.360.cn/ac/xpss?track=PCXP">新品推荐</a>
                <a href="https://mall.360.cn/ac/remaibang?track=PCRM">热卖榜单</a>
            </div>
            <div class="right">
                <div class="top">
                    <input type="text">
                    <button class="iconfont icon-fangdajing"></button>
                    <ul class="ulbox"></ul>
                </div>
                <ol class="bot">
                    <li><a href="">记录仪</a></li>
                    <li><a href="">摄像机</a></li>
                    <li><a href="">路由器</a></li>
                    <li><a href="">耳机</a></li>
                    <li><a href="">扫地机</a></li>
                    <li><a href="">智能手表</a></li>
                </ol>
            </div>
        </div>
    </div>

    <!-- banner -->
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="https://p0.ssl.qhimg.com/t01184f1bb03f655f98.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="https://p3.ssl.qhimg.com/t017443acfa1f8e9a9f.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="https://p0.ssl.qhimg.com/t010870466939631120.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="https://p3.ssl.qhimg.com/t01b1ae7e231ac75328.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="https://p0.ssl.qhimg.com/t0104d9aa62ec15199e.jpg" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- cate -->
        <a href="./liebiao.html" class="aa iconfont icon-yingyong"> 全部...</a>
        <ol class="cate">
            <!-- JS渲染 -->
        </ol>
        <div class="nav">
            <a href="">
                <img src="https://p4.ssl.qhimg.com/t012e56acec4dba8ef1.webp" alt="">
                <span>摄像头</span>
            </a>
        </div>
    </div>

    <!-- show -->
    <ul class="show">
        <li class="active">热门活动</li>
        <li class="">家庭安防</li>
        <li class="">防火墙</li>
        <li class="">安全行车</li>
        <li class="">扫地机</li>
        <li class="">智能守护</li>
        <li class="">生态互联</li>
        <li class="ccc">更多商品</li>
    </ul>

    <!-- area -->
    <div class="area">
        <ol class="daohang">
            <!-- 热门活动 -->
            <li class="huodong">
                <p>热门活动</p>
                <div class="center">
                    <img src="https://p5.ssl.qhimg.com/t0123e747cff6df3d57.png" alt="">
                    <img src="https://p4.ssl.qhimg.com/t012b5cec81fbe9c659.jpg" alt="">
                    <img src="https://p3.ssl.qhimg.com/t015d34aaa04c9ede6f.jpg" alt="">
                    <img src="https://p5.ssl.qhimg.com/t0175bdda93660b4f38.jpg" alt="">
                </div>
                <img src="https://p0.ssl.qhimg.com/t0170aaf86aa2387ded.png" alt="">
            </li>

            <li class="anfang">

            </li>

            <!-- 更多商品 -->
            <li class="gengduo">
                <p class="mo">更多商品</p>
                <div class="more">
                    <img src="" alt="">
                    <p>360智能摄影机小水滴5C 2K高清版AC1P</p>
                    <div class="price">￥149</div>
                </div>
            </li>
            <div class="bot">
                <span></span>
                <p>
                    我已经陪你到底了
                </p>
                <span></span>
            </div>
        </ol>
    </div>



    <!-- footer -->
    <div class="footer-o">
        <div class="container">
            <div class="left">
                <h1>关于商城</h1>
                <p>360商城是奇虎360公司的官方电商平台，主要经营360安全智能设备，以及相关领域消费品。提供最新的360智能设备，最贴心的售后服务，360社区一手评测资讯，享受360安全、安心、放心的购物体验。
                </p>
                <span></span>
                <div class="bot">
                    <p>关于我们</p>
                    <p class="iconfont icon-weixin"></p>
                    <p class="iconfont icon-weibo"></p>
                </div>
            </div>
            <div class="center">
                <div class="le">
                    <h1>售后服务</h1>
                    <ol>
                        <li>7日无理由退货</li>
                        <li>质量问题15日内换货</li>
                        <li>保修条款</li>
                        <li>服务流程</li>
                        <li>许可协议</li>
                        <li>隐私政策</li>
                    </ol>
                </div>
                <div class="righ">
                    <h1>帮助中心</h1>
                    <ol>
                        <li>用户注册</li>
                        <li>会员说明</li>
                        <li>登录与密码找回</li>
                        <li>购买指南</li>
                        <li>支付方式</li>
                        <li>配送与说明</li>
                    </ol>
                </div>
            </div>
            <div class="right">
                <h2>联系我们</h2>
                <h1>400-6822-360</h1>
                <p>周一至周日 9:00-18:00(仅收市话费)</p>
            </div>
        </div>

    </div>
    <div class="bottom">
        <div class="container">
            <div class="top">
                <div class="one">
                    <p class="iconfont icon-7tianbaotui"></p>
                    <p>7天无理由退货</p>
                </div>
                <div class="two">
                    <p class="iconfont icon-15tianbaotui01"></p>
                    <p>15天免费换货</p>
                </div>
                <div class="three">
                    <p class="iconfont icon-hezi201"></p>
                    <p>满99元包邮</p>
                </div>
            </div>
            <div class="bot">
                <p>20019-2021 mall.360.cn版权所有</p>
                <p>京ICP备08010314号-6 营业执照</p>
                <span>公司名称：北京视觉世界科技有限公司 | 社会统一信用代码：91110105336460203N | 食品经营许可证</span><br>
                <span>公司地址：北京市朝阳区酒仙桥路6号院2号楼1至17层102号内5层501 | 联系方式：400-6822-360</span>
            </div>
        </div>
    </div>





    <!-- JS -->
    <script src="../js/jquery/jquery.js"></script>
    <script src="../js/shouye.js"></script>
    <script src="../../node_modules/swiper/swiper-bundle.min.js"></script>

    <!-- banner -->
    <script>
        var mySwiper = new Swiper('.swiper', {
            // irection: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            autoplay:true,

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })       
    </script>


</body>

</html>